<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <!-- 本地存储 -->
    <!-- 
        Cookie可设置失效时间，默认是关闭浏览器失效
        数据大小：4k左右
        与服务端通信：每次都会携带在HTTP请求头中，如果使用cookie保存过多数据会带来性能问题
        易用性：需要程序员自己解封，源生的Cookie接口并不友好

     -->
    <!-- 
         localStorage除非被清除，否则永久保存
         数据大小：5MB
         与服务端通信：仅在客户端（仅浏览器）中保存，不参与和服务器的通信
         易用性：原生接口可以接受，亦可再次封装来Objeict和Array有更好支持
         	<script type="text/javascript">
		       localStorage.name = "zhongru";
	          	localStorage.setItem("id",01);
	          	// 生命周期 永久 除非清除缓存、
	        	// localStorage.getItem(key);
	          	// 获取本地key值
	        	localStorage.setItem(key,value);
	              	// 将value存储到key字段；
                  	localStorage.removeItem("name");
                    removeItem删除
              </script>
                setItem(key,value):存储数据，一键值对的方式存储；
        getItem(key):获取数据，通过指定名称的KEY获取对应的value的值
        removeItem(key):移除数据，通过指定的名称的key删除对应的值
        clear（）：清空所有的存储内容
      -->
    <!-- 
          sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除
            数据大小：5MB
         与服务端通信：仅在客户端（仅浏览器）中保存，不参与和服务器的通信
         易用性：原生接口可以接受，亦可再次封装来Objeict和Array有更好支持
         <script type="text/javascript">
	      	// 声明周期只存在当前页面 页面关闭随之清除
        sessionStorage.token = "21656546545464654656";
        setItem(key,value):存储数据，一键值对的方式存储；
        getItem(key):获取数据，通过指定名称的KEY获取对应的value的值
        removeItem(key):移除数据，通过指定的名称的key删除对应的值
        clear（）：清空所有的存储内容
	</script>
       -->



</body>

</html>